class drawMark {
  static timer1;
  static timer2;
  increaser;
  ctx;
  color;
  cb = () => {};
  constructor(markinfoCanvas, ctx, cb, color) {
    this.clearAnimationFrame();
    this.color = color;
    this.ctx = ctx;
    ctx.clearRect(0, 0, markinfoCanvas.width, markinfoCanvas.height);
    this.increaser = 0;
    ctx.beginPath();
    ctx.lineCap = "square";
    // ctx.globalCompositeOperation = "copy";
    ctx.lineWidth = 1;

    ctx.strokeStyle = color;
    this.cb = cb;
    ctx.moveTo(0, 80);
    this.drawline1();
  }
  clearAnimationFrame() {
    drawMark.timer1 && window.cancelAnimationFrame(drawMark.timer1);
    drawMark.timer2 && window.cancelAnimationFrame(drawMark.timer2);
  }
  
  // 斜线 [0, 80] -> [20, 60]。没有清除前面的绘制
  drawline1() {
    // console.log("line1");
    drawMark.timer1 = window.requestAnimationFrame(
      this.drawline1.bind(this)
    );
    this.ctx.lineTo(this.increaser, 80 - this.increaser);
    this.ctx.stroke();
    if (this.increaser >= 19) {
      this.clearAnimationFrame();
      this.drawline2();
    }
    this.increaser += 2;
  }

  // 直线 [20, 60] -> [170, 60]
  drawline2() {
    // console.log("lin2")
    this.ctx.lineTo(this.increaser, 60);
    this.ctx.stroke();
    drawMark.timer2 = window.requestAnimationFrame(
      this.drawline2.bind(this)
    );
    if (this.increaser >= 170) {
      this.clearAnimationFrame();
      this.cb();
    }

    this.increaser += 5;
  }
}